<div class="alarm-container">
<aside class="alarm-aside">
<app-device-tag-selector fxFlexFill 
[deviceCategories]="deviceCategories" 
[multipleFarm]="true" 
[choiceDeviceCount]="deviceCountLimit"
 [defaultChooseDeviceCount]="defaultChooseDeviceCount" 
(selectedDevicesChange)="onSelectedDevicesChange($event)">
</app-device-tag-selector>
</aside>

<section class="alarm-main">
<div class="progress-bar" *ngIf="isShowBar"></div>

<header class="alarm-main-query" fxLayout="row">
<!--查询时间表单选择-->
<section>
起始时间:
<p-calendar [locale]="en" [(ngModel)]="startTime" showTime="showTime" hourFormat="24"></p-calendar>
</section>
<section>
结束时间:
<p-calendar [locale]="en" [(ngModel)]="endTime" showTime="showTime" hourFormat="24"></p-calendar>
</section>
<!--(keyup)="onKeyUp($event)"-->
<input type="text" class="divFaultDesc" [(ngModel)]="divWarnName" placeholder="请输入测点名称查询">
<section>
<button class="button-trend" (click)="onSearch()">确定</button>
<i class="exp">
            <a (click)="exportData()" id="ex">导出</a>
          </i>

</section>

</header>

<div class="alarm-list alarm-flex">
<header class="alarm-main-header">
<span (click)=onClickHeader(0) [ngClass]="{on:active==0}">
历史预警
</span>
<!--<span (click)=onClickHeader(1) [ngClass]="{on:active==1}">
预警统计

</span>-->
</header>
<section class="alarm-full alarm-main-content" *ngIf="active==0">
<section class="alarm-main-fault alarm-flex">
<section class="alarm-full alarm-table">

<!-- <p-dataTable [value]="turbEarlyWarns" [rows]="15" [paginator]="true" [totalRecords]="turbEarlyWarns.length">
<p-column header="序号">
<ng-template let-data="rowData" let-i="rowIndex" pTemplate="body">
<span>{{ i + 1 }}</span>
</ng-template>
</p-column>
<p-column field="tagName" header="测点名称"></p-column>
<p-column field="stateName" header="状态">
<ng-template let-col let-data="rowData" pTemplate="body">
<span>{{ data[col.field] }}</span>
</ng-template>
</p-column>
<p-column field="startTime" header="开始时间"></p-column>
<p-column field="endTime" header="结束时间"></p-column>
<p-column field="maxVal" header="最大值"></p-column>
<p-column field="minVal" header="最小值"></p-column>
</p-dataTable> -->

<p-dataTable #dt [value]="turbEarlyWarns" [rows]="pageSize" [paginator]="true" [totalRecords]="count" [sortField]="sortFault"
 [sortOrder]="sortFO" [lazy]="true" (onLazyLoad)="loadCarsLazy($event)" id="ex-tab" border="1">
<!--[lazy]="true" (onLazyLoad)="loadCarsLazy($event)"-->
<p-header>{{startTime | date:'yyyy-MM-dd HH:mm:ss'}}--{{endTime | date:'yyyy-MM-dd HH:mm:ss'}}历史预警</p-header>
<p-column header="序号">
<ng-template let-data="rowData" let-i="rowIndex" pTemplate="body">
<span>{{ i + 1 }}</span>
</ng-template>
</p-column>
<p-column field="tagDesc" header="设备名称"></p-column>
<p-column field="stateName" header="状态"></p-column>
<p-column field="startTime" header="开始时间" [sortable]="true">
<ng-template let-col let-data="rowData" pTemplate="body">
<span>{{data[col.field] | date:'yyyy-MM-dd HH:mm:ss'}}</span>
</ng-template>
</p-column>
<p-column field="endTime" header="结束时间" [sortable]="true">
<ng-template let-col let-data="rowData" pTemplate="body">
<span>{{data[col.field] | date:'yyyy-MM-dd HH:mm:ss'}}</span>
</ng-template>
</p-column>
<p-column field="maxVal" header="最大值" [sortable]="true"></p-column>
<p-column field="minVal" header="最小值" [sortable]="true"></p-column>
<!--<p-footer>
<div class="ui-helper-clearfix">
<button type="button" pButton icon="fa-file-o" iconPos="left" label="导出" (click)="dt.exportCSV()" style="float:left"></button>
</div>
</p-footer>-->
</p-dataTable>

<div class="tab-excel" hidden>
<!-- 设置border="1"以显示表格框线 -->
<table id="ex-tab-turbEarlyWarns" border="1">
<!-- caption元素可以生成表标题，其单元格列跨度为表格的列数 -->
<caption border="1">{{startTime | date:'yyyy-MM-dd HH:mm:ss'}}--{{endTime | date:'yyyy-MM-dd HH:mm:ss'}}历史预警</caption>
<thead>
<tr>
<th>序号</th>
<th>设备名称</th>
<th>状态</th>
<th>开始时间</th>
<th>结束时间</th>
<th>最大值</th>
<th>最小值</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of turbEarlyWarns; let i=index">
<td>{{ i + 1}}</td>
<td>{{item.tagDesc}}</td>
<td>{{item.stateName}}</td>
<td>{{item.startTime | date:'yyyy-MM-dd HH:mm:ss'}}</td>
<td>{{item.endTime | date:'yyyy-MM-dd HH:mm:ss'}}</td>
<td>{{item.maxVal}}</td>
<td>{{item.minVal}}</td>
</tr>
</tbody>
</table>
</div>
</section>
<!--<footer class="alarm-list-footer alarm-footer">
<div class="alarm-category">
<span class="alarm-title">报警状态</span>
<span class="turb-span">
<label class="form-label-turb" *ngFor="let state of stateGroups">
<span class="check-box">
<input type="checkbox" [(ngModel)]="state.isChecked" (click)="onClickState($event.target, state)">
<span class="check" [ngStyle]="{'background':state.stateColor }"></span>
</span>
<span>{{state.stateGroupName}}</span>
<span>(
<span>{{state.stateCount}}</span>)</span>
</label>
</span>
</div>
</footer>-->
</section>
</section>
<!--<section class="alarm-full alarm-main-content" *ngIf="active==1">
<section class="alarm-main-fault alarm-flex">
<section class="alarm-full alarm-table">

<p-dataTable [value]="warmCountFilterData" [rows]="15" [paginator]="true" [totalRecords]="warmCountFilterData.length" [sortField]="sortF"
 [sortOrder]="sortO" >
<p-column header="序号">
<ng-template let-data="rowData" let-i="rowIndex" pTemplate="body">
<span>{{ i + 1 }}</span>
</ng-template>
</p-column>
<p-column field="tagDesc" header="设备名称"></p-column>
<p-column field="stateName" header="状态"></p-column>
<p-column field="warmsCount" header="预警次数" [sortable]="true"></p-column>
<p-column field="warmWorkTime" header="持续时间(h)" [sortable]="true"></p-column>
</p-dataTable>
</section>
</section>
</section>-->
</div>
</section>
</div>